<template>
  <div class="shopcategory-root">
    <swiper :options="swiperOption">
      <swiper-slide v-for="(slide, index) in shopcategorys">
        <section class="aui-grid">
        <div class="aui-row">

            <div class="aui-col-xs-3" v-for="item in slide">
              <router-link :to="'/shop/'+item.id+'/'+item.name" style="color:#666">
                <div class="menu">
                      <img style="width:2.5rem;" :src="baseUrl+item.icon">
                 </div>
                <div class="aui-grid-label">{{item.name}}</div>
              </router-link>
               
            </div>
        </div>
    </section>
      </swiper-slide>
      <div class="swiper-pagination" style="margin-top:1rem;" slot="pagination"></div>
    </swiper>
  	
  </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import Config from 'components/config';
export default {
  name: 'shopcategory',
  props: {
    shopcategorys: {
      type: Array
    }
  },
  data () {
    return {
      baseUrl:'',
      swiperOption: {
        setWrapperSize :true,
        pagination : '.swiper-pagination',
        paginationClickable :true,
        mousewheelControl : true,
        observeParents:true,
      },
      swiperSlides:[1,2,3,4,5]
    }
  },
   components: {
    swiper,
    swiperSlide,
  },
   created(){
    this.baseUrl=Config.data().url;
    console.log('我是shopcategorys');
   
  },
  mounted() {
    
  },
}
</script>
<style type="text/css">
  .diver-header{
    padding: 0.2rem 0.3rem 0.2rem 0.5rem;
  }
  .shopcategory-root .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
    bottom: 0px;
  }
  .shopcategory-root .menu{

      position: relative;
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;   
  }
</style>